<template>
  <teleport to="body">
    <transition name="slide">
      <div class="add-song" v-show="visible">
        <van-sticky :offset-top="0" z-index="999">
          <div class="header">
            <h1 class="title">添加歌曲到列表</h1>
            <div class="close" @click="hide">
              <i class="icon-close"></i>
            </div>
          </div>
        </van-sticky>

        <div class="search-input-wrapper">
          <SearchInput v-model="query" placeholder="搜索歌曲"></SearchInput>
        </div>
        <div v-show="!query">
          <div class="list-wrapper">
            <van-sticky :offset-top="44" z-index="999">
              <van-tabs v-model:active="currentIndex" type="card">
                <van-tab title="最近播放" class="list-scroll"> </van-tab>
                <van-tab title="历史记录" class="list-scroll"> </van-tab>
              </van-tabs>
            </van-sticky>

            <van-popup
              v-model:show="visible"
              position="bottom"
              :style="{ height: VHeight }"
              :overlay="false"
              duration="0"
            >
              <HistoryList
                :songs="playHistory"
                @select="selectSongBySongList"
                v-show="currentIndex === 0"
              >
              </HistoryList>
              <SearchList
                v-show="currentIndex === 1"
                showDelete
                @addQuery="addQuery"
              ></SearchList>
            </van-popup>
          </div>
        </div>
        <div class="search-result" v-show="query">
          <Suggest
            :query="query"
            :show-singer="false"
            @select-song="selectSongBySuggest"
          >
          </Suggest>
        </div>
        <!-- <message ref="messageRef">
          <div class="message-title">
            <i class="icon-ok"></i>
            <span class="text">1首歌曲已经添加到播放列表</span>
          </div>
        </message> -->
      </div>
    </transition>
  </teleport>
</template>

<script>
import Scroll from '@/components/Scroll'
import SearchInput from '@/components/Search/SearchInput'
import Suggest from '@/components/Search/Suggest'
import SearchList from '@/components/Search/SearchList'
import HistoryList from '@/components/HistoryList'
import { ref, computed, nextTick, watch } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'add-song',
  components: {
    SearchInput,
    Suggest,
    SearchList,
    HistoryList,
    Scroll
  },
  setup() {
    const addSongRef = ref(null)
    const visible = ref(false)
    const query = ref('')
    const VHeight = ref('')
    const currentIndex = ref(0)
    const messageRef = ref(null)

    const store = useStore()
    const searchHistory = computed(() => store.state.searchHistory)
    const playHistory = computed(() => store.state.playHistory)
    const windowHeight = computed(() => store.state.windowHeight)

    watch(windowHeight, newHeight => {
      VHeight.value = newHeight - 180 + 'px'
    })

    watch(query, async () => {
      await nextTick()
    })

    async function show() {
      visible.value = true
    }

    function hide() {
      visible.value = false
    }

    function addQuery(s) {
      query.value = s
    }

    function selectSongBySongList({ song }) {
      addSong(song)
    }

    function selectSongBySuggest(song) {
      addSong(song)
    }

    function addSong(song) {
      store.dispatch('addSong', song)
      showMessage()
    }

    function showMessage() {
      messageRef.value.show()
    }

    return {
      VHeight,
      addSongRef,
      visible,
      query,
      messageRef,
      currentIndex,
      searchHistory,
      playHistory,
      show,
      hide,
      addQuery,
      selectSongBySongList,
      selectSongBySuggest
    }
  }
}
</script>

<style lang="scss" scoped>
.add-song {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: 3000;
  background: $color-background;

  .header {
    position: relative;
    height: 44px;
    text-align: center;
    .title {
      line-height: 44px;
      font-size: $font-size-large;
      color: $color-text;
    }
    .close {
      position: absolute;
      top: 0;
      right: 8px;
      .icon-close {
        display: block;
        padding: 12px;
        font-size: 20px;
        color: $color-theme;
      }
    }
  }
  .search-input-wrapper {
    margin: 20px;
    height: 54px;
  }
  .list-wrapper {
    .van-tabs {
      height: 30px;
    }

    .list-inner {
      padding: 10px 20px 20px;
    }
  }
  .search-result {
    position: fixed;
    top: 124px;
    bottom: 0;
    width: 100%;
  }
}

.message-title {
  text-align: center;
  padding: 18px 0;
  font-size: 0;
  .icon-ok {
    font-size: $font-size-medium;
    color: $color-theme;
    margin-right: 4px;
  }
  .text {
    font-size: $font-size-medium;
    color: $color-text;
  }
}
</style>
